<template>
  <!-- 选择角色 -->
  <div class="config-select-role" style="height:460px">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="searchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="roleCode" :label="$t('module.role.roleCode')">
          <Input
            type="text"
            :maxlength="50"
            v-model.trim="searchForm.roleCode"
            :placeholder="$t('module.role.warning.enterRoleCode')"
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="roleName" :label="$t('module.role.roleName')">
          <Input
            type="text"
            :maxlength="50"
            v-model.trim="searchForm.roleName"
            :placeholder="$t('module.role.warning.enterRoleName')"
            @on-enter="search"
          ></Input>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">  
            <RPButton optType="search" @click="search" />
            <RPButton optType="reset" @click="reset" />
        </Form-item>

      </Form>
    </SelfAdaption>
    <InnerPageTable ref="roleTable" :config="pageTableConfig"> 
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import { queryRole } from "@/api/roleApi.js";
import locales from "./locales.js";

export default {
  name: "",
  components: {},
  props: {},
  mixins: [locales],
  data() {
    return {
      searchForm: {
        roleCode: "",
        roleName: ""
      },
      pageTableConfig: {
        loadDataFn: this.queryRoleList,
        columnsFn: this.generateColumns,
        autoFirst: true,
        highlightRow: true,
        rowClickHandle: this.onRowClick
      }
    };
  },
  computed: {},
  created: function() {
    this.$emit("SetTitle", this.$t("module.configManage.selectRole"));
    this.$emit("SetPageWidth", 850);
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    // 表格的列
    generateColumns() {
      return [
        {
          title: this.$t("module.role.roleCode"),
          key: "roleCode",
          align: "left"
        },
        {
          title: this.$t("module.role.roleName"),
          key: "roleName",
          align: "left"
        }
      ];
    },
    // 获取角色列表数据
    queryRoleList({ responseProcess, param }) {
      queryRole(param).then(data => {
        responseProcess(data);
      });
    },
    // 查询
    search(page = 1) {
      this.$refs["roleTable"].load(this.searchForm, page);
    },
    // 重置
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    },
    // 点击当前行触发
    onRowClick() {
      let row = this.$refs["roleTable"].getHighlightRow();
      this.$emit("Close", row);
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.config-select-role {
  .inner-table {
    .single-table-con {
      div:nth-child(3) {
        overflow: inherit !important;
      }
    }
  }
}
</style>
